<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import type { DrawerProps } from 'ant-design-vue';
import { GM_setClipboard } from '$';
const placement = ref<DrawerProps['placement']>('right');
const open = ref<boolean>(false);

// 常用信息
const dataInfo = reactive({
  uid: '',
  username: '',
  phone: '',
  MEIZUSTORESESSIONID: ''
})

const fileList = reactive<string[]>([]);

const loginUrl = ref<string>(
  `https://login.flyme.cn/vCodeLogin?useruri=http%3A%2F%2Fstore.meizu.com%2Fmember%2Flogin.htm?useruri=${encodeURIComponent(location.href)}&amp;sid=unionlogin&amp;service=store&amp;autodirct=true`
)

const islogin = ref<boolean>(false);
const cookiesObj = {};

const messageAction = (content: string, type: 'success'|'error'|'info'|'warning'|'loading'|'warn' = 'success') => {
  message[type]({
    content: () => content
  });
}

const showDrawer = () => {
  open.value = true;
};

const onClose = () => {
  open.value = false;
};

const pageInit = (cookiesO) => {
  const MZ_ALAD_USER_INFO = cookiesO.MZ_ALAD_USER_INFO ? JSON.parse(decodeURIComponent(cookiesO.MZ_ALAD_USER_INFO)) : null;
  dataInfo.uid = cookiesO.uid ? cookiesO.uid : '';
  dataInfo.username = cookiesO.username ? cookiesO.username : '';
  dataInfo.phone = MZ_ALAD_USER_INFO ? MZ_ALAD_USER_INFO.phone : '';
  dataInfo.MEIZUSTORESESSIONID = cookiesO.MEIZUSTORESESSIONID ? cookiesO.MEIZUSTORESESSIONID : '';
  islogin.value = cookiesO._islogin ? true : false;
  const fileKeywordFilter = ['sku', 'add', 'order', 'main', 'myorder', 'layout', 'address', 'member', 'new'];
  const scripts = document.querySelectorAll('script');
  const links = document.querySelectorAll('link');
  const files:string[] = [];
  fileList.splice(0, fileList.length);
  scripts.forEach((script) => {
    if (script.src) {
      files.push(script.src)
    }
  });
  links.forEach((link) => {
    if (link.href) {
      files.push(link.href)
    }
  });
  files.forEach((file) => {
    const index = fileKeywordFilter.findIndex((fileKeyword) => {
      const fileTemps = file.split('/');
      if (!fileTemps || fileTemps.length === 0) {
        return false;
      }
      // fileTemps[fileTemps.length -1].indexOf(fileKeyword) != -1
      return  new RegExp(fileKeyword).test(fileTemps[fileTemps.length -1]);
    });
    if (index != -1) {
      fileList.push(file);
    }
  });
}

const onRefresh = () => {
  pageInit(cookiesObj);
  messageAction('刷新成功');
}

const copy = (text) => {
  GM_setClipboard(text, 'text');
  messageAction('复制成功');
}


onMounted(() => {
  const cookies = document.cookie.split('; ');
  cookies.forEach((cookie) => {
    const cookieItems =  cookie.split('=');
    cookiesObj[cookieItems[0]] = cookieItems[1];
  })
  console.log('---- onMounted cookies ----:', cookiesObj);
  pageInit(cookiesObj);
  if (document.querySelector('#meizu-footer')) {
    (document.querySelector('#meizu-footer') as HTMLDivElement).style.position = 'relative';
  }
})

defineExpose({
  showDrawer
})
</script>

<template>
  <a-drawer :rootStyle="{zIndex: 10000}" :width="500" title="知了..." :placement="placement" :open="open" @close="onClose">
    <template #extra>
      <a-button type="primary" @click="onRefresh">
        <svg t="1693404672289" class="refresh-icon" viewBox="0 0 1879 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3340" width="200" height="200"><path d="M938.617341 45.280925c-106.987283 0-205.687861 35.810405-285.003468 96.184971-17.905202 13.613873-19.532948 39.953757-3.551445 55.93526 13.169942 13.169942 34.034682 14.649711 48.83237 3.255491 66.589595-50.608092 149.752601-80.795376 239.574566-80.795375 207.16763 0 377.932948 159.667052 395.542197 362.247399 1.627746 19.384971-0.295954 34.774566-0.295954 34.774566l-93.225434 0.739884 113.202313 225.516763c9.766474 0 150.788439-226.404624 150.788439-226.404624h-94.409249c0.443931-24.564162-1.183815-35.810405-1.627745-40.545665-20.716763-241.054335-223.593064-430.760694-469.82659-430.90867zM938.617341 913.905202c-219.00578 0-397.021965-178.164162-397.021965-397.021965v-0.443931l94.261271-1.035838-112.018497-224.924855-150.936416 226.256647h94.261272C467.015029 781.317919 692.087861 988.485549 938.617341 988.485549c110.982659 0 213.234682-38.621965 293.882081-102.991907 17.313295-13.909827 18.645087-39.80578 2.959538-55.49133-13.465896-13.465896-34.774566-14.649711-49.572255-2.811561-67.921387 54.307514-153.895954 86.714451-247.269364 86.714451z" fill="currentColor" p-id="3341"></path></svg>
      </a-button>
    </template>
    <a-space direction="vertical" style="width: 100%">
      <a-card title="常用信息">
        <a-space direction="vertical">
          <a-tag color="processing">
            <p class="tag-detail"><div class="tag-detail-title"><span>uid：</span><a v-if="islogin" href="javascript:void(0);" @click="() => copy(dataInfo.uid)">复制</a></div><span>{{ dataInfo.uid && islogin ? dataInfo.uid : '待登录' }}</span></p>
          </a-tag>
          <a-tag color="processing">
            <p class="tag-detail"><div class="tag-detail-title"><span>username：</span><a v-if="islogin" href="javascript:void(0);" @click="() => copy(dataInfo.username)">复制</a></div><span>{{ dataInfo.username && islogin ? dataInfo.username : '待登录' }}</span></p>
          </a-tag>
          <a-tag color="processing">
            <p class="tag-detail"><div class="tag-detail-title"><span>phone：</span><a v-if="islogin" href="javascript:void(0);" @click="() => copy(dataInfo.phone)">复制</a></div><span>{{ dataInfo.phone && islogin ? dataInfo.phone : '待登录' }}</span></p>
          </a-tag>
          <a-tag color="processing">
            <p class="tag-detail"><div class="tag-detail-title"><span>MEIZUSTORESESSIONID：</span><a v-if="islogin" href="javascript:void(0);" @click="() => copy(dataInfo.MEIZUSTORESESSIONID)">复制</a></div><span>{{ dataInfo.MEIZUSTORESESSIONID && islogin ?  dataInfo.MEIZUSTORESESSIONID : '待登录' }}</span></p>
          </a-tag>
        </a-space>
      </a-card>
      <a-card title="常用操作">
        <a-space>
          <a-button v-if="!islogin">
            <a :href="loginUrl" target="_blank">立即登录</a>
          </a-button>
          <a-button v-else>
            <a href="https://store.meizu.com/member/logout.html" target="_blank">退出登录</a>
          </a-button>
        </a-space>
      </a-card>
      <a-card title="重要静态文件">
        <a-list size="small" bordered :data-source="fileList">
          <template #renderItem="{ item }">
            <a-list-item>
              <p class="file-list-detail">
                <a href="item" target="_blank">{{ item }}</a>
                <span class="file-copy-btn">
                  <a href="javascript:void(0);" @click="() => copy(item)">复制url</a>
                  <a href="javascript:void(0);" @click="() => copy(item.split('/').pop())">复制文件名</a>
                </span>
              </p>
            </a-list-item>
          </template>
        </a-list>
      </a-card>
    </a-space>
  </a-drawer>
</template>

<style scoped>
.refresh-icon{
  height: 100%;
  width: auto;
  color: #fff;
}
.tag-detail,.file-list-detail{
  font-size: 14px;
  display: flex;
  flex-direction: column;
  user-select: text;
  white-space: wrap;
  word-break: break-all;
  color: #1677ff;
}
.tag-detail{
  margin: 5px;
}
.tag-detail-title{
  min-width: 240px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.tag-detail-title a{
  color: #666;
}
.file-copy-btn{
  display: flex;
  flex-direction: row;
}
.file-copy-btn a{
  padding-right: 8px;
  color: #666;
}
</style>
